<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <rowHeader>
                <div>
                    <span style="width: 40px" class="s1">{{
                        $t('basics.accName')
                    }}</span>
                    <a-input
                        v-model="form.username"
                        :placeholder="$t('basics.textAcc')"
                    />
                </div>
                <div>
                    <span class="s1">{{ $t('basics.status') }}</span>
                    <a-select
                        style="width: 100px"
                        class="mr20"
                        v-model="form.status"
                        :placeholder="$t('basics.textStatus')"
                    >
                        <a-option
                            :label="$t('basics.weikaishi')"
                            :value="1"
                        ></a-option>
                        <a-option
                            :label="$t('basics.jingxingzhong')"
                            :value="2"
                        ></a-option>
                        <a-option
                            :label="$t('basics.tingzhi')"
                            :value="3"
                        ></a-option>
                        <a-option
                            :label="$t('basics.yiwancheng')"
                            :value="4"
                        ></a-option>
                    </a-select>
                    <a-button
                        class="ml20 mr20"
                        type="primary"
                        @click="searchButton"
                    >
                        <icon-search class="mr6" />
                        {{ $t('basics.search') }}
                    </a-button>
                    <a-button type="secondary" @click="resetButton">
                        <icon-refresh class="mr6" />
                        {{ $t('basics.reset') }}
                    </a-button>
                    <!-- <div class="btn mr20" @click="searchButton">
                            <icon-search />
                            {{ $t('basics.search') }}
                        </div>
                        <div class="btn gray" @click="resetButton">
                            <icon-refresh />
                            {{ $t('basics.reset') }}
                        </div> -->
                </div>
            </rowHeader>
            <!-- <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span style="width: 40px" class="s1">{{
                            $t('basics.accName')
                        }}</span>
                        <a-input
                            v-model="form.username"
                            :placeholder="$t('basics.textAcc')"
                        />
                    </div>
                    <div>
                        <span class="s1">{{ $t('basics.status') }}</span>
                        <a-select
                            style="width: 100px"
                            class="mr20"
                            v-model="form.status"
                            :placeholder="$t('basics.textStatus')"
                        >
                            <a-option
                                :label="$t('basics.weikaishi')"
                                :value="1"
                            ></a-option>
                            <a-option
                                :label="$t('basics.jingxingzhong')"
                                :value="2"
                            ></a-option>
                            <a-option
                                :label="$t('basics.tingzhi')"
                                :value="3"
                            ></a-option>
                            <a-option
                                :label="$t('basics.yiwancheng')"
                                :value="4"
                            ></a-option>
                        </a-select>
                        <a-button
                            class="ml20 mr20"
                            type="primary"
                            @click="searchButton"
                        >
                            <icon-search class="mr6" />
                            {{ $t('basics.search') }}
                        </a-button>
                        <a-button type="secondary" @click="resetButton">
                            <icon-refresh class="mr6" />
                            {{ $t('basics.reset') }}
                        </a-button>
                    </div>
                </div>
            </div> -->
            <div class="container-content mt10">
                <div class="container-content-table">
                    <a-table
                        :columns="columns"
                        :data="tableList"
                        :loading="loading"
                        v-model:selectedKeys="selectedKeys"
                        row-key="id"
                        @selection-change="getRowData"
                        :pagination="false"
                    >
                        <template #status="{ record }">
                            <span v-if="record.status == 1">{{
                                $t('basics.weikaishi')
                            }}</span>
                            <span v-if="record.status == 2">{{
                                $t('basics.jingxingzhong')
                            }}</span>
                            <span v-if="record.status == 3">{{
                                $t('basics.tingzhi')
                            }}</span>
                            <span v-if="record.status == 4">{{
                                $t('basics.yiwancheng')
                            }}</span>
                        </template>
                        <template #num_of_reply_conversion="{ record }">
                            <span>{{ computerNum(record) }}</span>
                        </template>
                        <template #operate="{ record }">
                            <div class="flex">
                                <a-link @click="toConversation(record.user_id)">
                                    {{ $t('basics.jinruhuihua') }}</a-link
                                >
                                <!-- <div
                                    class="btn txt primary"
                                    @click="toConversation(record.user_id)"
                                >
                                    {{ $t('basics.jinruhuihua') }}
                                </div> -->
                            </div>
                        </template>
                        <!-- <template #operate="{ record }">
                  <a-button size="mini" type="outline">{{$t('basics.inTalk')}}</a-button>
              </template> -->
                    </a-table>
                    <div
                        class="_crud-footer mt-3 text-right"
                        ref="crudFooterRef"
                    >
                        <a-pagination
                            :total="pageList.total"
                            show-total
                            show-jumper
                            show-page-size
                            @page-size-change="getList"
                            @change="getList"
                            v-model:current="form.page"
                            v-model:page-size="form.pageSize"
                            style="display: inline-flex"
                            :page-size-options="[10, 20, 50, 100]"
                            :default-page-size="100"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';
import { getPageListByAdminList } from '@/api/cloud/userTask.js';
import { getProjectId } from '@/api/cloud/userProject.js';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import rowHeader from '@/components/row-header/index.vue';
const router = useRouter();
const { t } = useI18n();
const { proxy } = getCurrentInstance();
const checkedList = ref([]);
const bandFormRef = ref('');
const selectedKeys = ref([]);
const loading = ref(false);
const computerNum = (record) => {
    if (record.num_of_success) {
        let total =
            (
                (record.num_of_reply_conversion / record.num_of_success) *
                100
            ).toFixed(2) + '%';
        // return total
        if (total > 100) {
            return 100 + '%';
        } else {
            return total;
        }
    } else {
        return 0;
    }
};
const columns = [
    {
        title: t('basics.accName'),
        dataIndex: 'username',
        minWidth: 100,
        slotName: 'username'
    },
    // {
    //   title: '任务名称',
    //   dataIndex: 'task_name',
    //   minWidth:150,
    //   align : 'center',
    //   slotName: 'task_name'
    // },
    {
        title: t('basics.createAt'),
        dataIndex: 'created_at',
        minWidth: 200
    },
    {
        title: t('basics.fasongzongshu'),
        dataIndex: 'num_of_need_message',
        minWidth: 150,
        slotName: 'num_of_need_message'
    },
    {
        title: t('basics.yifasong'),
        dataIndex: 'num_of_pop',
        minWidth: 150,
        slotName: 'num_of_pop'
    },
    {
        title: t('basics.fsSecc'),
        dataIndex: 'num_of_success',
        minWidth: 150,
        slotName: 'num_of_success'
    },
    // {
    //   title: t('basics.fsFail'),
    //   dataIndex: 'num_of_failed',
    //   minWidth:150,
    //   align : 'center',
    //   slotName: 'num_of_failed'
    // },
    {
        title: t('basics.fasongzhong'),
        dataIndex: 'num_of_sending',
        minWidth: 150,
        slotName: 'num_of_sending'
    },
    {
        title: t('basics.huifu'),
        dataIndex: 'num_of_reply_conversion',
        minWidth: 150
    },
    {
        title: t('basics.huifuNum'),
        dataIndex: 'num_of_reply',
        minWidth: 150,
        slotName: 'num_of_reply_conversion'
    },

    {
        title: t('basics.status'),
        dataIndex: 'status',
        minWidth: 150,
        slotName: 'status'
    },
    {
        title: t('basics.controls'),
        dataIndex: 'operate',
        minWidth: 150,
        slotName: 'operate'
    }
];

const form = ref({
    project_id: '',
    username: '',
    status: 2,
    page: 1,
    pageSize: 100
});
// 获取美国项目id
const getId = () => {
    getProjectId({ project_key: 'america' }).then((res) => {
        form.value.project_id = res.data.id;
        getList();
    });
};
getId();
const tableList = ref([]);
const pageList = ref({
    total: 0
});
const rowSelection = ref({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
});

// 获取列表数据
const getList = () => {
    loading.value = true;
    getPageListByAdminList(form.value).then((res) => {
        tableList.value = res.data.items;
        pageList.value = res.data.pageInfo;
        loading.value = false;
    });
};
//   跳转对话
const toConversation = async (id) => {
    try {
        await router.push({ name: 'america:dialogbox', query: { id } });
    } catch (error) {
        if (error.isNavigationFailure) {
            // 处理导航失败的情况
            console.error('Navigation failed due to permissions', error);
        } else {
            proxy.$message.error('没有权限');
        }
    }
};
// getList()
// 搜索
const searchButton = () => {
    getList();
};
// 获取选择列
const getRowData = (selectedRowKeys) => {};
const reset = () => {
    form.value.username = '';
    form.value.status = 2;
    form.value.page = 1;
    form.value.pageSize = 100;
};

const resetButton = () => {
    reset();
    getList();
};
// 自定义合计行
const summary = ({ columns, data }) => {};
</script>
<script>
export default { name: 'cloud:userProject' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
// .app-container {
//     .container-head {
//         padding: 20px;
//         .formButton {
//             display: flex;
//             justify-content: center;
//             align-items: center;
//         }
//     }
//     .container-content {
//         padding: 20px;
//         .container-content-button {
//             margin-bottom: 10px;
//             .arco-btn {
//                 margin-right: 10px;
//             }
//         }
//     }
// }
// .dialog-foot {
//     text-align: end;
// }
</style>
